<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				margin-top: 10px;
				display: flex;
				font-size: 30px;
			}
		</style>
		<script src="js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var arr2 = ["非常差","差","一般","好","非常好"];
				$("span").click(function(){
					console.log($(this).index());
					var n1 = ($(this).index()-1)%5;
					$(this).siblings("span").css("color","black");
					for(var i=0;i<=n1;i++){
						console.log(1);
						$(this).parent().children("span").eq(i).css("color","red");
					}
					$(this).siblings("p").html(arr2[n1]);
					
				})
			})
		</script>
	</head>
	<body>
		<ul>
			<li>
				<h3>服务态度</h3>
				<span>☆</span>
				<span>☆</span>
				<span>☆</span>
				<span>☆</span>
				<span>☆</span>
				<p>一般</p>
			</li>
			<li>
				<h3>物流速度</h3>
				<span>☆</span>
				<span>☆</span>
				<span>☆</span>
				<span>☆</span>
				<span>☆</span>
				<p>一般</p>
			</li>
			<li>
				<h3>产品质量</h3>
				<span>☆</span>
				<span>☆</span>
				<span>☆</span>
				<span>☆</span>
				<span>☆</span>
				<p>一般</p>
			</li>
		</ul>
	</body>
</html>
